<template>
  <el-row class="node-analysis">
    <el-row class="logo-block">
      <el-col :span="3" class="logo-image">
        <el-image
            class="_hover"
            style="height: 80px;"
            :src="require('../../assets/maven_logo.png')"
            fit="fit"
            @click="show_maven_lists"
        >
        </el-image>
      </el-col>
      <el-col class="logo-info" :class="(ecosystem_to_show==='maven') ? '_wide':'_thin'">
        <el-row class="info-container">
          Website: <span class="_url" @click="to_url(homepage_maven)">{{ homepage_maven }}</span>
        </el-row>
        <el-row class="info-container">
          Total Packages: {{ version_num_maven }}
        </el-row>
      </el-col>
      <el-col :span="3" class="logo-image">
        <el-image
            class="_hover"
            style="height: 80px;"
            :src="require('../../assets/pypi_logo.png')"
            fit="fit"
            @click="show_pypi_lists"
        >
        </el-image>
      </el-col>
      <el-col class="logo-info" :class="(ecosystem_to_show==='pypi') ? '_wide':'_thin'">
        <el-row class="info-container">
          Website: <span class="_url" @click="to_url(homepage_pypi)">{{ homepage_pypi }}</span>
        </el-row>
        <el-row class="info-container">
          Total Packages: {{ version_num_pypi }}
        </el-row>
      </el-col>
      <el-col :span="3" class="logo-image">
        <el-image
            class="_hover"
            style="height: 80px;"
            :src="require('../../assets/euler_logo.png')"
            fit="fit"
            @click="show_euler_lists"
        >
        </el-image>
      </el-col>
      <el-col class="logo-info" :class="(ecosystem_to_show==='euler') ? '_wide':'_thin'">
        <el-row class="info-container">
          Website: <span class="_url" @click="to_url(homepage_euler)">{{ homepage_euler }}</span>
        </el-row>
        <el-row class="info-container">
          Total Packages: {{ version_num_euler }}
        </el-row>
      </el-col>
    </el-row>
    <el-row class="list-block">
      <el-col class="list-container" :span="8">
        <el-row class="list-title">
          Critical Packages
        </el-row>
        <el-row class="pkg-list">
          <el-scrollbar style="height: 100%">
            <el-row v-for="(pkg, index) in critical_pkg_list" class="list-item" :key="index">
              <el-row class="item-name" @click.native="to_pkg_detail(pkg.name)">{{ pkg.name }}</el-row>
              <el-row class="item-score">Critical score: <span style="color: #529b2e">{{ Math.round(pkg.score) }}</span></el-row>
            </el-row>
          </el-scrollbar>
        </el-row>
      </el-col>
      <el-col class="list-container" :span="8">
        <el-row class="list-title">
          High PageRank Packages
        </el-row>
        <el-row class="pkg-list">
          <el-scrollbar style="height: 100%">
            <el-row v-for="(pkg, index) in pagerank_pkg_list" class="list-item" :key="index">
              <el-row class="item-name" @click.native="to_pkg_detail(pkg.name)">{{ pkg.name }}</el-row>
              <el-row class="item-score">PageRank: <span style="color: #529b2e">{{ Math.round(pkg.pagerank) }}</span></el-row>
              <el-row class="item-info">{{ pkg.info }}</el-row>
            </el-row>
          </el-scrollbar>
        </el-row>
      </el-col>
      <el-col class="list-container" :span="8">
        <el-row class="list-title">
          Most Depended upon Packages
        </el-row>
        <el-row class="pkg-list">
          <el-scrollbar style="height: 100%">
            <el-row v-for="(pkg, index) in depe_pkg_list" class="list-item" :key="index">
              <el-row class="item-name" @click.native="to_pkg_detail(pkg.name)">{{ pkg.name }}</el-row>
              <el-row class="item-score">Dependent packages: <span style="color: #529b2e">{{ pkg.depen_cnt }}</span></el-row>
              <el-row class="item-info">{{ pkg.info }}</el-row>
            </el-row>
          </el-scrollbar>
        </el-row>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import axios from "axios";

export default {
  name: "NodeAnalysis",
  data() {
    return {
      ecosystem_to_show: "maven",
      homepage_maven: "https://maven.org",
      homepage_pypi: "https://pypi.org/",
      homepage_euler: "https://www.openeuler.org/",
      version_num_maven: 0,
      version_num_pypi:0,
      version_num_euler: 0,
      depe_pkg_list: [],
      pagerank_pkg_list: [],
      critical_pkg_list: [],
      maven_lists: [],
      pypi_lists: [],
      euler_lists: [],
    }
  },
  methods: {
    to_url: function (url) {
      window.open(url)
    },
    fix_num: function (num, round) {
      return num.toFixed(round)
    },
    to_pkg_detail: function (pkg) {
      this.$emit("change_tag", { to: 2, pkg: pkg, platform: this.ecosystem_to_show })
    },
    show_maven_lists: function () {
      this.ecosystem_to_show = "maven"
      this.critical_pkg_list = this.maven_lists[0]
      this.pagerank_pkg_list = this.maven_lists[1]
      this.depe_pkg_list = this.maven_lists[2]
    },
    show_pypi_lists: function () {
      this.ecosystem_to_show = "pypi"
      this.critical_pkg_list = this.pypi_lists[0]
      this.pagerank_pkg_list = this.pypi_lists[1]
      this.depe_pkg_list = this.pypi_lists[2]
    },
    show_euler_lists: function () {
      this.ecosystem_to_show = "euler"
      this.critical_pkg_list = this.euler_lists[0]
      this.pagerank_pkg_list = this.euler_lists[1]
      this.depe_pkg_list = this.euler_lists[2]
    },
  },
  computed: {

  },
  mounted() {
    // 版本数目初始化
    axios({
      method: "get",
      params: { },
      url: "http://localhost:8000/search/pkg_num"
    }).then(res => {
      if (res.status !== 200) {
        this.$message.error('获取包版本数时出现未知错误')
      } else {
        this.version_num_maven = res.data.data["maven"]
        this.version_num_pypi = res.data.data["pypi"]
        this.version_num_euler = res.data.data["euler"]
      }
    })
    // 列表初始化
    axios({
      method: "get",
      params: { },
      url: "http://localhost:8000/search/maven_pkg_lists"
    }).then(res => {
      if (res.status !== 200) {
        this.$message.error('获取Maven包列表时出现未知错误')
      } else {
        this.maven_lists = res.data.data
        this.critical_pkg_list = this.maven_lists[0]
        this.pagerank_pkg_list = this.maven_lists[1]
        this.depe_pkg_list = this.maven_lists[2]
      }
    })
    axios({
      method: "get",
      params: { },
      url: "http://localhost:8000/search/euler_pkg_lists"
    }).then(res => {
      if (res.status !== 200) {
        this.$message.error('获取Euler包列表时出现未知错误')
      } else {
        this.euler_lists = res.data.data
      }
    })
    axios({
      method: "get",
      params: { },
      url: "http://localhost:8000/search/pypi_pkg_lists"
    }).then(res => {
      if (res.status !== 200) {
        this.$message.error('获取Pypi包列表时出现未知错误')
      } else {
        this.pypi_lists = res.data.data
      }
    })
  }
}
</script>

<style scoped>
.logo-block {
  height: 110px;
  text-align: left;
  padding: 10px;
  border-bottom: gainsboro 1px solid;
}
.logo-image {
  text-align: center;
}
.logo-info {
  font-size: 15px;
  overflow: hidden;
  white-space: nowrap;
  transition: 0.5s;
}
.info-container {
  padding-top: 15px;
}

.list-block {
  margin-top: 20px;
}
.list-container {
  text-align: left;
  padding: 10px;
}
.list-title {
  font-size: 20px;
}
.pkg-list {
  margin-top: 10px;
  height: 460px;
  width: 350px;
  overflow-y: auto;
}
.pkg-list >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
.pkg-list >>> .el-scrollbar__bar.is-horizontal {
  display: none;
}
.list-item {
  border-left: #2c3e50 2px solid;
  margin-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
}
.item-name {
  color: #395cc5;
  font-size: 15px;
  font-weight: bold;
}
.item-name:hover {
  cursor: pointer;
  color: #021f7c;
  text-decoration:underline
}
.item-score {
  margin-top: 8px;
  font-size: 14px;
  color: grey;
}
.item-info {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  text-align: justify;
}

._url {
  color: #5192ff;
}
._url:hover {
  color: #2373ff;
  cursor: pointer;
}
._hover:hover {
  cursor: pointer;
}
._wide {
  width: 400px;
}
._thin {
  width: 0;
}

</style>